<!--
  主布局组件
  包含侧边栏、主题切换、登录/注册/设置弹窗等
-->
<template>
  <div class="main-layout">
    <Sidebar @show-login="showLogin = true" @show-register="showRegister = true" @show-settings="showSettings = true" />
    <div class="chat-main">
      <div class="theme-toggle-btn" @click="toggleTheme">
        <svg v-if="theme === 'light'" width="32" height="32" viewBox="0 0 40 40" fill="none">
          <circle cx="20" cy="20" r="10" fill="#FFD600" stroke="#FFD600" stroke-width="2"/>
          <g stroke="#FFD600" stroke-width="2">
            <line x1="20" y1="4" x2="20" y2="10"/>
            <line x1="20" y1="30" x2="20" y2="36"/>
            <line x1="4" y1="20" x2="10" y2="20"/>
            <line x1="30" y1="20" x2="36" y2="20"/>
            <line x1="8.28" y1="8.28" x2="13.14" y2="13.14"/>
            <line x1="26.86" y1="26.86" x2="31.72" y2="31.72"/>
            <line x1="8.28" y1="31.72" x2="13.14" y2="26.86"/>
            <line x1="26.86" y1="13.14" x2="31.72" y2="8.28"/>
          </g>
        </svg>
        <svg v-else width="32" height="32" viewBox="0 0 40 40" fill="none">
          <!-- 两圆叠加的月牙 -->
          <circle cx="20" cy="20" r="14" fill="#fff"/>
          <circle cx="25" cy="16" r="12" fill="#23272a"/>
        </svg>
      </div>
      <slot />
    </div>
    <Login v-if="showLogin" @close="showLogin = false" />
    <Register v-if="showRegister" @close="showRegister = false" />
    <Settings v-if="showSettings" @close="showSettings = false" />
  </div>
</template>

<script setup>
// 引入Vue相关API和子组件
import { ref, onMounted, onUnmounted } from 'vue'
import Sidebar from '@/components/Sidebar.vue'
import Login from '@/pages/user/Login.vue'
import Register from '@/pages/user/Register.vue'
import Settings from '@/pages/user/Settings.vue'
const showLogin = ref(false)
const showRegister = ref(false)
const showSettings = ref(false)

const theme = ref('light')
function toggleTheme() {
  theme.value = theme.value === 'light' ? 'dark' : 'light'
  document.documentElement.setAttribute('data-theme', theme.value)
}

onMounted(() => {
  window.addEventListener('show-register-dialog', handleShowRegister)
  window.addEventListener('show-login-dialog', handleShowLogin)
  window.addEventListener('show-settings-dialog', handleShowSettings)
})
onUnmounted(() => {
  window.removeEventListener('show-register-dialog', handleShowRegister)
  window.removeEventListener('show-login-dialog', handleShowLogin)
  window.removeEventListener('show-settings-dialog', handleShowSettings)
})
function handleShowRegister() {
  showRegister.value = true
  showLogin.value = false
}
function handleShowLogin() {
  showLogin.value = true
  showRegister.value = false
}
function handleShowSettings() {
  showSettings.value = true
}
</script>

<style scoped>
.main-layout {
  display: flex;
  min-height: 100vh;
  height: auto;
  overflow-y: auto;
}
.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  min-height: 0;
  height: auto;
  position: relative;
}
.theme-toggle-btn {
  position: absolute;
  top: 24px;
  right: 48px;
  z-index: 10;
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
  padding: 0;
  transition: filter 0.2s;
}
.theme-toggle-btn:hover {
  filter: brightness(0.85);
}
/* 移除.user-profile-fixed、.avatar、.username、.arrow相关样式 */
</style> 